<template>
	<view class="page">
		<!-- #ifndef MP-WEIXIN-->
		<my-navbar leftText="结算单"  @leftClick="back" ></my-navbar>
		<!-- #endif -->
		<div class="tabs_box">
			<view class="box">
				<u-subsection class="tabs" :list="list" :current="current" @change="changeTab" button-color="#40AE36" active-color="#fff"></u-subsection>
			</view>
		</div>
		<!-- 在线支付 -->
		<view class="content" v-show="current==0">
			<view class="list" v-for="item in dataList1" :key="item.id" @click="toDetail(item.id)">
				<div style="flex:1">
					<view class="left">
						<view>结算单号：{{item.order_sn}}</view>
						<view>账期：<text>{{item.payment_days}}</text></view>
						<view>差异金额：<text style="color:#E84B4B">￥{{item.diff_money}}</text></view>
						<view>结算日期：<text style="color:#9A9A9A">{{item.createdTime}}</text></view>
					</view>
				</div>
				<u-icon class="icon" name="arrow-right"></u-icon>					
			</view>
			<view class="nodata" v-if="dataList1.length==0">
				<image :src="nodataImg" mode="aspectFit"></image>
				<view>空空如也~</view>
			</view>
		</view>
		<!-- 货到付款 -->
		<view class="content" v-show="current==1">
			<view class="list" v-for="item in dataList2" :key="item.id" @click="toDetail(item.id)">
				<div style="flex:1">
					<view class="left">
						<view>结算单号：{{item.order_sn}}</view>
						<view>账期：<text>{{item.payment_days}}</text></view>
						<view>付款金额：<text style="color:#E84B4B">￥{{item.collect_money}}</text></view>
						<view>抹零金额：<text style="color:#E84B4B">￥{{item.zero_money}}</text></view>
						<view>结算日期：<text style="color:#9A9A9A">{{item.createdTime}}</text></view>
					</view>
				</div>
				<u-icon class="icon" name="arrow-right"></u-icon>					
			</view>
			<view class="nodata" v-if="dataList2.length==0">
				<image :src="nodataImg" mode="aspectFit"></image>
				<view>空空如也~</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {$https} from '@/static/js/request.js';
	export default {
		data() {
			return {
				nodataImg:getApp().globalData.nodataImg,
				list: [{name: '在线支付'}, {name: '货到付款'},],
				current: 0,
				
				dataList1:[],
				dataList2:[],
				pages1:{
					page:1,
					count:null,
				},
				pages2:{
					page:1,
					count:null,
				}
			};
		},
		onLoad(){
			this.getData1(this.pages1.page);
			this.getData2(this.pages2.page);
		},
		methods:{
			//在线支付
			getData1(page){
				var params = {
					size:20,
					page,
				}
				$https('GET','settlementListOnline',params,res=>{
					if(res.data.errcode==0){
						var list = res.data.data.list;
						list = this.changeDate(list);
						this.dataList1 = this.dataList1.concat(list)
						this.pages1.count = res.data.data.count;
						this.pages1.page = page;								
					}else{
						uni.showToast({
							title: res.data.errmsg,
							icon:'none'
						});
					}
				})					
			},
			//货到付款
			getData2(page){
				var params = {
					size:20,
					page,
				}
				$https('GET','settlementListOffline',params,res=>{
					if(res.data.errcode==0){
						var list = res.data.data.list;
						list = this.changeDate(list);
						this.dataList2 = this.dataList2.concat(list)
						this.pages2.count = res.data.data.count;
						this.pages2.page = page;
					}else{
						uni.showToast({
							title: res.data.errmsg,
							icon:'none'
						});
					}
				})					
			},
			//时间戳转时间
			changeDate(list){
				for(let i in list){
					var ms = Number(list[i].created_at+'000');
					var now = new Date();
					now.setTime(ms);
					var date = now.getFullYear()+"-" + (now.getMonth()+1) + "-" + now.getDate()+ ' ' + now.getHours()+':'+now.getMinutes()+':'+now.getSeconds()
					list[i].createdTime = date;
				}
				return list;
			},
			changeTab(index){
				this.current = index;
				
			},
			toDetail(id){
				let type = this.current==0 ? 1:2;
				uni.navigateTo({
					url: `/subpack/user/final_statement/final_statement_detail?id=${id}&type=${type}`
				});
			},
			back(){
				// #ifdef H5
					window.history.back(-1);
				// #endif 
				// #ifndef H5
				uni.navigateBack();
				// #endif
			}
		},
		onReachBottom(){
			if(this.current==0){
				if(this.dataList1.length<this.pages1.count){
					this.pages1.page++;
					this.getData(this.pages1.page,1);
				}
			}else if(this.current == 1){
				if(this.dataList2.length<this.pages2.count){
					this.pages2.page++;
					this.getData(this.pages2.page,2);
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
.page{
	font-size: 24rpx;
	.tabs_box{
		position: fixed;
		left:0;
		right:0;
		background:#F6F6F7;
		margin:auto;
		.box{
			width:328rpx;
			margin:20rpx auto;
			.tabs{
				width: 100%;
			}
		}		
	}
	.content{
		// #ifndef MP-WEIXIN
			margin-top:120rpx;
		// #endif
		padding:0 30rpx;
		// #ifdef MP-WEIXIN
			padding-top:120rpx;
		// #endif
		.list{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding:16rpx 0;
			border-bottom:1px solid #ECECEC;
			line-height: 40rpx;
			.left{
				width:400rpx;
				.status{
					color:#E84B4B;
					&.green{
						color:#4FA389;
					}
				}
			}
			.right{
				display: flex;
				justify-content: space-between;
			}
			.icon{
				margin-left:20rpx;
			}
		}

	}
}
</style>
